<!DOCTYPE html>

<html>

<head>
    <meta charset="utf-8">
    <title>非学员</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="../../../layuiadmin/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="../../../layuiadmin/style/admin.css" media="all">
</head>

<body>

    <div class="layui-card layadmin-header">
        <div class="layui-breadcrumb" lay-filter="breadcrumb">
            <a lay-href="">主页</a>
            <a><cite>组件</cite></a>
            <a><cite>数据表格</cite></a>
            <a><cite>开启头部工具栏</cite></a>
        </div>
    </div>


    <div class="layui-fluid">

        <div class="layui-row layui-col-space15">

            <div class="layui-col-md12">
                <div class="layui-card">

                    <div class="layui-card-body">
                        <form class="layui-form">

                            <div class="layui-form-item">
                                <label class="layui-form-label">按名字查询非学员</label>
                                <div class="layui-input-inline">
                                    <input type="text" placeholder="按名字查询" id="name" class="layui-input">
                                </div>
                                <div class="layui-input-inline">
                                    <select id="studentType">
                                    </select>
                                </div>
                            </div>

                            <div class="layui-form-item">
                                <div class="layui-input-block">
                                    <div class="layui-inline">
                                        <button type="button" class="layui-btn layuiadmin-btn-list" id="searchStd" lay-submit lay-filter="LAY-app-contlist-search">
                                            搜索
                              <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
                            </button>
                                    </div>

                                </div>
                            </div>
                        </form>
                        <button class="layui-btn" class="layui-btn layui-btn-primary layui-btn-xs" id="adds">添加学员</button>
                        <button class="layui-btn" class="layui-btn layui-btn-primary layui-btn-xs" id="addsElement">添加便签</button>
                        <table class="layui-hide" id="test-table-toolbar" lay-filter="test-table-toolbar"></table>



                        <script type="text/html" id="test-table-toolbar-barDemo">
                            <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">更多操作</a>
                            <a class="layui-btn layui-btn-xs" lay-event="edit">信息修改</a>
                            <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
                        </script>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="../../../layuiadmin/layui/layui.js"></script>
    <script src="../../../layuiadmin/jquery/jquery-1.11.1.min.js"></script>
    <script src="../../../layuiadmin/url.js"></script>
    <script>
        layui.config({
            base: '../../../layuiadmin/' //静态资源所在路径
        }).extend({
            index: 'lib/index' //主入口模块
        }).use(['index', 'table', 'form'], function() {
            var admin = layui.admin,
                table = layui.table;
            form = layui.form;
            table.render({
                elem: '#test-table-toolbar',
                url: applicationUrl + 'no-student/api/page',
                toolbar: '#test-table-toolbar-toolbarDemo',
                id: 'tableReload',
                title: '用户数据表',
                cols: [
                    [{
                        field: 'sid',
                        width: 60,
                        title: 'ID',
                        sort: true
                    }, {
                        field: 'name',
                        width: 80,
                        title: '用户名'
                    }, {
                        field: 'sex',
                        width: 50,
                        title: '性别',
                        sort: true
                    }, {
                        field: 'age',
                        width: 60,
                        title: '年龄'
                    }, {
                        field: 'phone',
                        width: 120,
                        title: '电话'
                    }, {
                        field: 'birthday',
                        width: 110,
                        title: '生日'
                    }, {
                        field: 'typeName',
                        width: 90,
                        title: '便签'
                    }, {
                        field: 'createTime',
                        width: 170,
                        title: '创建时间',
                        sort: true
                    }, {
                        field: 'lastUpdateTime',
                        width: 170,
                        title: '最后一次修改时间',
                        sort: true
                    }, {
                        fixed: 'right',
                        title: '操作',
                        toolbar: '#test-table-toolbar-barDemo',
                        width: 220
                    }]
                ],
                page: true
            });
            //加载下拉框
            $(function() {
                $.ajax({
                    url: applicationUrl + 'no-studentType/api/list',
                    type: "POST",
                    dataType: "json",
                    success: function(data) {
                        $("#studentType").append("<option value='0'>全部</option>");
                        for (var i = 0; i < data.length; i++) {
                            $("#studentType").append("<option value='" + data[i].studentType + "'>" + data[i].names + "</option>");
                        }
                        form.render(); //注意渲染页面表单，否则不显示数据
                    }
                });

            });
            //头工具栏事件
            table.on('toolbar(test-table-toolbar)', function(obj) {
                var checkStatus = table.checkStatus(obj.config.id);
                switch (obj.event) {
                    case 'getCheckData':
                        var data = checkStatus.data;
                        layer.alert(JSON.stringify(data));
                        break;
                    case 'getCheckLength':
                        var data = checkStatus.data;
                        layer.msg('选中了：' + data.length + ' 个');
                        break;
                    case 'isAll':
                        layer.msg(checkStatus.isAll ? '全选' : '未全选');
                        break;
                };
            });

            $("#adds").click(function() {
                layer.open({
                    type: 2,
                    title: '添加学员',
                    content: '../../component/form/no-student-group.html',

                    area: ['760px', '494px'],

                });
            });




            $("#addsElement").click(function() {
                layer.open({
                    type: 2,
                    title: '添加便签',
                    content: '../../component/form/no-student-group-add-lable.html',

                    area: ['760px', '494px'],

                });
            });


            //监听行工具事件
            table.on('tool(test-table-toolbar)', function(obj) {
                var data = obj.data;

                if (obj.event === 'del') {
                    layer.confirm('真的删除行么', function(index) {
                        console.log(data.sid);
                        $.ajax({
                            type: 'POST',
                            dataType: 'json',
                            url: applicationUrl + 'no-student/api/delete',
                            data: {
                                sid: data.sid
                            },
                            success: function(data) {
                                layer.msg(data.msg);
                                obj.del();
                                layer.close(index);
                            },
                            error: function() {
                                layer.msg('删除失败，发生未知异常');
                            }
                        })

                    });
                } else if (obj.event === 'edit') {
                    layer.open({
                        type: 2,
                        content: '../../component/form/no-student-update.html?sid=' + data.sid,
                        area: ['760px', '494px'],

                    });
                } else if (obj.event === 'detail') {
                    layer.msg('进入查看更多操作');
                    console.log("查看");
                    window.location.href = "../../app/content/no-student-list.html?sid=" + data.sid;
                }
            });

            $("#withExport").click(function() {
                layer.msg("点击事件");
                var studentType = $("#studentType").val();
                alert("" + studentType);

            });


            $('#searchStd').on('click', function() {
                var type = 'reload';
                active_reload[type] ? active_reload[type].call(this) : '';
            });

            var active_reload = {
                reload: function() {
                    var name = $("#name").val();
                    var studentType = $('#studentType').val();

                    //执行重载
                    table.reload('tableReload', {

                        page: {
                            curr: 1 //重新从第 1 页开始
                        },
                        where: {
                            name: name,
                            studentType: studentType
                        }
                    }, 'data');
                }
            };


        });
    </script>
</body>

</html>